<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model:page="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      style="width: 100%"
      height="450"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template #icon="scope">
        <el-icon style="font-size: 20px" v-if="scope.row.icon">
          <component :is="getComponentName(scope.row.icon)" />
        </el-icon>
      </template>
      <template #menu="scope">
        <el-button
          icon="el-icon-view"
          :size="scope.size"
          :type="scope.type"
          @click.stop="handleView(scope.row, scope.index)"
        >查看
        </el-button>
      </template>
    </avue-crud>
    <widget-list-drawer v-if="isShow" v-model="isShow" ref="w-drawer" />
  </basic-container>
</template>

<script>
import widgetListDrawer from '@code/views/code/compont/business/business-drawer.vue'
import { anvilCodeComponents as allFile } from '@code/components/anvil-code-low-common'

export default {
  name: 'WidgetList',
  components: {
    widgetListDrawer
  },
  data() {
    return {
      OrginalTableData: [],
      isShow: false,
      form: {},
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: {
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        menuAlign: 'center',
        align: 'center',
        searchMenuSpan: 6,
        header: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        selection: true,
        // height: window.innerHeight - 380,
        searchLabelWidth: 120,
        column: [
          {
            type: 'input',
            label: '图标',
            prop: 'icon',
            width: '80px',
            // formatter: (row) => {
            //   return row.icon;
            // },
          },
          {
            type: 'select',
            width: '160px',
            dicData: [
              { label: '基础', value: '基础' },
              { label: '表单输入型', value: '表单输入型' },
              {
                label: '详情展示',
                value: '详情展示'
              }
            ],
            label: '类型',
            prop: 'type',
            rules: [],
            search: true
          },
          {
            type: 'input',
            label: '控件名称',
            prop: 'fileName',
            rules: [],
            search: true
          }
        ]
      }
    }
  },
  methods: {
    setType(name) {
      if (name.indexOf('Chart') != -1) {
        return '图表'
      } else if (name.indexOf('Form') != -1) {
        return '表单输入型'
      } else if (name.indexOf('Show') != -1) {
        return '详情展示'
      } else {
        return '基础'
      }
    },
    setIcon(name) {
      if (name.indexOf('Chart') != -1) {
        return 'el-icon-s-data'
      } else if (name.indexOf('Show') != -1) {
        return 'el-icon-s-promotion'
      } else {
        return 'el-icon-star-on'
      }
    },
    getList() {
      let arr = []
      for (let i in allFile) {
        // console.log('file', i, allFile[i])
        allFile[i].type = this.setType(i)
        allFile[i].icon = this.setIcon(i)
        arr.push(allFile[i])
      }
      // console.log('arr', arr)
      const filterFile = (file) => {
        // console.log(file.fileName)
        return file.fileName.indexOf('Config') === -1
      }
      this.OrginalTableData = arr.filter(filterFile)
      this.tableData = arr.filter(filterFile)
      console.log('this.tableData', this.tableData)
    },
    searchChange(form, done) {
      this.searchForm = form;

      const isFormEmpty = (form) => {
        for (let key in form) {
          if (form.hasOwnProperty(key) && form[key] !== null && form[key] !== undefined && form[key] !== '') {
            return false;
          }
        }
        return true;
      };

      if (!isFormEmpty(form)) {
        this.tableData = this.OrginalTableData.filter((e) => {
          return e.type === form.type || e.fileName.includes(form.fileName);
        });
      } else {
        this.tableData = [...this.OrginalTableData];
      }

      done();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },
    handleView(row) {
      this.isShow = true
      this.$nextTick(() => {
        this.$refs['w-drawer'].initData(row.fileName)
      })
    },
    getComponentName(iconName) {
      let componentName = iconName.slice(8);
      componentName = componentName.replace(/-on$/, '');
      return componentName;
    }
  }
}
</script>

<style scoped></style>
